<template>
	<div class="app-container">
		<div>
      <p class="dialogTitle title">当前地震事件:
        <span v-if="currentEvent">{{ currentEvent.eventName }}</span>
        <span v-else>请在地震事件管理中设置当前地震事件</span>
      </p>
    </div>
    <el-row>
			<el-col :span="8">
				<div style="font-size: 16px;font-weight: bold;">
					地震直接经济损失汇总（万元）
				</div>
			</el-col>
		</el-row>	
		<el-row style="margin-top: 20px;margin-bottom: 10px;">
			<el-col :span="10">
				<el-button type="primary" @click="handleQuery">汇总</el-button>
			</el-col>
		</el-row>

		<el-row style="margin-bottom: 50px;">
			<el-col :span="24">
				<el-table v-loading="loading" :data="dataList"  :span-method="objectSpanMethod">
					<el-table-column label="" align="center" prop="" width="200">
						<template #header>
              <span>行政区划</span><br>
              <span>（省市县）</span>
            </template>
            
						<template #default="scope">
							<span v-if="scope.row.province=='北京市'||scope.row.province=='天津市'||scope.row.province=='上海市'||scope.row.province=='重庆市'">{{scope.row.province}}{{scope.row.county}}</span>
              <span v-else>{{scope.row.province}}{{scope.row.city}}{{scope.row.county}}</span>
            </template>
          </el-table-column>

					<el-table-column label="房屋" align="center" prop="">
						<el-table-column label="农村住宅" align="center" prop="ruralResidential" width="100">
							<template #default="scope">
								<span v-if="scope.row.province=='百分比'">{{(scope.row.ruralResidential*100).toFixed(2)}}%</span>
	              <span v-else>{{scope.row.ruralResidential}}</span>
	            </template>
	          </el-table-column>
						<el-table-column label="农村共用" align="center" prop="ruralPublic" width="100"/>
						<el-table-column label="城市住宅" align="center" prop="urbanResidential" width="100"/>
						<el-table-column label="城市公用" align="center" prop="urbanPublic" width="100"/>
						<el-table-column label="政府办公" align="center" prop="governmentOffice" width="100"/>
						<el-table-column label="教育系统" align="center" prop="educationSystem" width="100"/>
						<el-table-column label="卫生系统" align="center" prop="healthcareSystem" width="100"/>
						<el-table-column label="其他用途" align="center" prop="otherUsage" width="100"/>
					</el-table-column>
					<el-table-column label="生命线" align="center" prop="">
						<el-table-column label="电力" align="center" prop="electricity" width="100">
							<template #default="scope">
								<span v-if="scope.row.province=='百分比'">{{(scope.row.electricity*100).toFixed(2)}}%</span>
	              <span v-else>{{scope.row.electricity}}</span>
	            </template>
	          </el-table-column>
						<el-table-column label="供排水" align="center" prop="waterSupplyAndDrainage" width="100"/>
						<el-table-column label="供气" align="center" prop="gasSupply" width="100"/>
						<el-table-column label="供热" align="center" prop="heatingSupply" width="100"/>
						<el-table-column label="交通" align="center" prop="traffic" width="100"/>
						<el-table-column label="长输油、气管" align="center" prop="oilAndGasPipelines" width="100"/>
						<el-table-column label="通信" align="center" prop="communication" width="100"/>
						<el-table-column label="广播电视" align="center" prop="broadcastingAndTelevision" width="100"/>
						<el-table-column label="市政设施" align="center" prop="municipalFacilities" width="100"/>
						<el-table-column label="铁路" align="center" prop="railway" width="100"/>
					</el-table-column>
					<el-table-column label="企业" align="center" prop="enterprise" width="100">
						<template #default="scope">
							<span v-if="scope.row.province=='百分比'">{{(scope.row.enterprise*100).toFixed(2)}}%</span>
              <span v-else>{{scope.row.enterprise}}</span>
            </template>
          </el-table-column>
					<el-table-column label="水利" align="center" prop="waterConservancy" width="100">
						<template #default="scope">
							<span v-if="scope.row.province=='百分比'">{{(scope.row.waterConservancy*100).toFixed(2)}}%</span>
              <span v-else>{{scope.row.waterConservancy}}</span>
            </template>
          </el-table-column>
					<el-table-column label="文物古建" align="center" prop="culturalHeritage" width="100">
						<template #default="scope">
							<span v-if="scope.row.province=='百分比'">{{(scope.row.culturalHeritage*100).toFixed(2)}}%</span>
              <span v-else>{{scope.row.culturalHeritage}}</span>
            </template>
          </el-table-column>
					<el-table-column label="其他" align="center" prop="other" width="100">
						<template #default="scope">
							<span v-if="scope.row.province=='百分比'">{{(scope.row.other*100).toFixed(2)}}%</span>
              <span v-else>{{scope.row.other}}</span>
            </template>
          </el-table-column>
					<el-table-column label="室内外财产" align="center" prop="">
						<el-table-column label="室内财产" align="center" prop="indoorProperty" width="100">
							<template #default="scope">
								<span v-if="scope.row.province=='百分比'">{{(scope.row.indoorProperty*100).toFixed(2)}}%</span>
	              <span v-else>{{scope.row.indoorProperty}}</span>
	            </template>
	          </el-table-column>
						<el-table-column label="室外财产" align="center" prop="outdoorProperty" width="100"/>
					</el-table-column>
					<el-table-column label="合计" align="center" prop="total" width="100">
						<template #default="scope">
							<span v-if="scope.row.province=='百分比'">{{scope.row.total*100}}%</span>
              <span v-else>{{scope.row.total}}</span>
            </template>
          </el-table-column>
				</el-table>
			</el-col>
		</el-row>
		
		<!--<el-row style="margin-top: 20px;margin-bottom: 10px;">
			<el-col :span="10">
				<el-button type="primary" @click="handleQuery1">汇总</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table v-loading="loading1" :data="dataList1"  :span-method="objectSpanMethod">
					<el-table-column label="评估子区" align="center" prop="" width="200" />						

										<el-table-column label="房屋" align="center" prop="">
						<el-table-column label="农村住宅" align="center" prop="ruralResidential" width="100">
							<template #default="scope">
								<span v-if="scope.row.province=='百分比'">{{scope.row.ruralResidential*100}}%</span>
	              <span v-else>{{scope.row.ruralResidential}}</span>
	            </template>
	          </el-table-column>
						<el-table-column label="农村共用" align="center" prop="ruralPublic" width="100"/>
						<el-table-column label="城市住宅" align="center" prop="urbanResidential" width="100"/>
						<el-table-column label="城市公用" align="center" prop="urbanPublic" width="100"/>
						<el-table-column label="政府办公" align="center" prop="governmentOffice" width="100"/>
						<el-table-column label="教育系统" align="center" prop="educationSystem" width="100"/>
						<el-table-column label="卫生系统" align="center" prop="healthcareSystem" width="100"/>
						<el-table-column label="其他用途" align="center" prop="otherUsage" width="100"/>
					</el-table-column>
					<el-table-column label="生命线" align="center" prop="">
						<el-table-column label="电力" align="center" prop="electricity" width="100">
							<template #default="scope">
								<span v-if="scope.row.province=='百分比'">{{scope.row.electricity*100}}%</span>
	              <span v-else>{{scope.row.electricity}}</span>
	            </template>
	          </el-table-column>
						<el-table-column label="供排水" align="center" prop="waterSupplyAndDrainage" width="100"/>
						<el-table-column label="供气" align="center" prop="gasSupply" width="100"/>
						<el-table-column label="供热" align="center" prop="heatingSupply" width="100"/>
						<el-table-column label="交通" align="center" prop="traffic" width="100"/>
						<el-table-column label="长输油、气管" align="center" prop="oilAndGasPipelines" width="100"/>
						<el-table-column label="通信" align="center" prop="communication" width="100"/>
						<el-table-column label="广播电视" align="center" prop="broadcastingAndTelevision" width="100"/>
						<el-table-column label="市政设施" align="center" prop="municipalFacilities" width="100"/>
						<el-table-column label="铁路" align="center" prop="railway" width="100"/>
					</el-table-column>
					<el-table-column label="企业" align="center" prop="enterprise" width="100">
						<template #default="scope">
							<span v-if="scope.row.province=='百分比'">{{scope.row.enterprise*100}}%</span>
              <span v-else>{{scope.row.enterprise}}</span>
            </template>
          </el-table-column>
					<el-table-column label="水利" align="center" prop="waterConservancy" width="100">
						<template #default="scope">
							<span v-if="scope.row.province=='百分比'">{{scope.row.waterConservancy*100}}%</span>
              <span v-else>{{scope.row.waterConservancy}}</span>
            </template>
          </el-table-column>
					<el-table-column label="文物古建" align="center" prop="culturalHeritage" width="100">
						<template #default="scope">
							<span v-if="scope.row.province=='百分比'">{{scope.row.culturalHeritage*100}}%</span>
              <span v-else>{{scope.row.culturalHeritage}}</span>
            </template>
          </el-table-column>
					<el-table-column label="其他" align="center" prop="other" width="100">
						<template #default="scope">
							<span v-if="scope.row.province=='百分比'">{{scope.row.other*100}}%</span>
              <span v-else>{{scope.row.other}}</span>
            </template>
          </el-table-column>
					<el-table-column label="室内外财产" align="center" prop="">
						<el-table-column label="室内财产" align="center" prop="indoorProperty" width="100">
							<template #default="scope">
								<span v-if="scope.row.province=='百分比'">{{scope.row.indoorProperty*100}}%</span>
	              <span v-else>{{scope.row.indoorProperty}}</span>
	            </template>
	          </el-table-column>
						<el-table-column label="室外财产" align="center" prop="outdoorProperty" width="100"/>
					</el-table-column>
					<el-table-column label="合计" align="center" prop="total" width="100">
						<template #default="scope">
							<span v-if="scope.row.province=='百分比'">{{scope.row.total*100}}%</span>
              <span v-else>{{scope.row.total}}</span>
            </template>
          </el-table-column>
				</el-table>
			</el-col>
		</el-row>-->
				
		<el-dialog title="计算公式" v-model="open" width="700px" append-to-body>
			<div style="font-size: 16px;">
				<p>房屋破坏直接经济损失，应按下列步骤计算：</p>
				<p>&nbsp;a) 按式(1)计算各评估子区各类房屋在某种破坏等级下的损失L</p>
				    <p>&nbsp;&nbsp;&nbsp;&nbsp;Lh=Sh×Rh×Dh×Ph    .............................(1)</p>
				  <p>&nbsp;&nbsp;&nbsp;式中：</p>
				   <p>&nbsp;&nbsp;&nbsp;Sh——该评估子区同类房屋总建筑面积，单位为平方米；</p>
				   <p>&nbsp;&nbsp;&nbsp;Rh——该评估子区同类房屋某种破坏等级的破坏比；</p>
				   <p>&nbsp;&nbsp;&nbsp;Dh——该评估子区同类房屋某种破坏等级的损失比；</p>
				   <p>&nbsp;&nbsp;&nbsp;Ph——该评估子区同类房屋重置单价，单位为元每平方米。</p>
				<p>&nbsp;b) 将所有破坏等级的房屋损失相加，得到该评估子区该类房屋破坏的损失；</p>
				<p>&nbsp;c) 将所有类别房屋的损失相加，得到该评估子区房屋损失；</p>
				<p>&nbsp;d) 将所有评估子区的房屋损失相加，得出整个灾区的房屋损失。</p>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="open = false">关 闭</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="lossesSummary">
	import useEventStore from "@/store/modules/event";
	import { getAllList, getAllList1, getEconomicLossesSummaryData, getDisasterAreasHousesData, getEconomicLossesSummaryTip } from "@/api/directLossAssess/lossesSummary.js"
	const {
		proxy
	} = getCurrentInstance();
	const dataList = ref([]);
	const dataList1 = ref([]);
	const ids = ref();
	const radio = ref("1");
	const loading = ref(false);
	const loading1 = ref(false);
	const single = ref(true);
	const multiple = ref(true);
	const open = ref(false);
	const total = ref(0);
	const showSearch = ref(true);
	const currentEvent = computed(() => useEventStore().currentEvent);
	const option = ref([])
	const data = reactive({
		queryParams: {
//			page: 1,
//			rows: 10,
			xstmId: undefined,
			evaluationSubareaName: "",			
		},
		form: {}
	})
	const {
		queryParams,
		form
	} = toRefs(data)

	/** 搜索按钮操作 */
	function handleQuery() {
		getList();
	}
	function handleQuery1() {
		getList1();
	}

	/** 重置按钮操作 */
	function resetQuery() {
		dataList.value = [];
		proxy.resetForm("queryRef");
		handleQuery();
	}
	// 查看计算公式
	function viewFormula(id) {		
		open.value = true;			
	}
	
	function getEconomicLossesSummaryDataList() {
		loading.value = true;
		getEconomicLossesSummaryData(currentEvent.value.id).then(response => {	
			loading.value = false;							
			dataList.value = response.data ? response.data : [];			
		}).catch(()=>{loading.value = false;dataList.value = []});
		
	}
	function getDisasterAreasHousesDataList(){
		getAllList({xsemId:currentEvent.value.id}).then(response => {
			dataList1.value = response.data ? response.data : [];
			proxy.$modal.msgSuccess('计算成功')
			getEconomicLossesSummaryDataList()
		});
	}

	/** 查询数据列表 */
	function getList() {
		getEconomicLossesSummaryTip().then(res=>{
			if(res.message==''){
				getEconomicLossesSummaryDataList();
			}else{
				proxy.$modal
				.confirm(res.message)
				.then(function() {
					loading.value = true;
					return getEconomicLossesSummaryData(currentEvent.value.id)
					.then((response) => {
						loading.value = false;
						dataList.value = response.data ? response.data : [];
						// proxy.$modal.msgSuccess(response.message)
					}).catch(() => {loading.value = false;dataList.value = []});
				})
				.catch(() => {});
				}
				
		})
		
	}
		/** 查询数据列表 */
	function getList1() {
			loading1.value = true;
			getAllList1({xsemId:currentEvent.value.id}).then(response => {
				dataList1.value = response.data ? response.data : [];
				//total.value = response.data.total;
				loading1.value = false;
			});
		
	}
	function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
	if(rowIndex === dataList.value.length-1 || rowIndex === dataList.value.length-2){
	 	if (columnIndex === 1 ) {
		 return {
		 		rowspan: 1,
			 	colspan: 8
			};
		}else if( columnIndex === 2 || columnIndex === 3||columnIndex === 4||columnIndex === 5||columnIndex === 6||columnIndex === 7||columnIndex === 8){
			return {
		 		rowspan: 0,
			 	colspan: 0
			};
		}else if(columnIndex === 9 ){
			return {
		 		rowspan: 1,
			 	colspan: 10
			};
		}else if( columnIndex === 10 || columnIndex === 11||columnIndex === 12||columnIndex === 13||columnIndex === 14||columnIndex === 15||columnIndex === 16||columnIndex === 17||columnIndex === 18){
			return {
		 		rowspan: 0,
			 	colspan: 0
			};
		}else if(columnIndex === 23 ){
			return {
		 		rowspan: 1,
			 	colspan: 2
			};
		}else if(columnIndex === 24){
			return {
		 		rowspan: 0,
			 	colspan: 0
			};
		}
	}
}

	onMounted(() => {
		setTimeout(() => {
			getEconomicLossesSummaryDataList();
			//getDisasterAreasHousesDataList();
			//getList();
		}, 200)
	})
</script>

<style scoped lang="scss">
	.title {
		margin: 0 0 20px !important;
	}
	:deep(.el-table) th.el-table__cell {
    border-bottom: 1px solid #ffffff !important;
    border-right: 1px solid #ffffff !important;
	}
	:deep(.el-table) td.el-table__cell {
    border-bottom: 1px solid #ebeef5 !important;
    border-right: 1px solid #ebeef5 !important;
	}
</style>